<template>
  <div class="">
    <el-dialog title="上传违约付款凭证/账户" :visible.sync="dialogBoole" width="780px">
      <el-form :model="form" ref="refForm" label-width="125px" class="demo-form-inline">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="header-card">
            <span class="header-card-title">违约金付款凭证</span>
          </div>
          <el-form-item label="违约金付款凭证:" prop="paymentVoucher"
                        :rules="{required:true,message:'请上传违约金付款凭证',target:'blur'}">
            <image-common v-model="form.paymentVoucher" :limit="5" :disabled="false" :upType="2"/>
          </el-form-item>
        </el-card>

        <el-card class="box-card" shadow="never" style="margin-top: 16px">
          <div slot="header" class="header-card">
            <span class="header-card-title">承销商收款账户</span>
          </div>

          <el-form-item label="收款账号:" prop="underwriterBankAccount"
                        :rules="{required:true,message:'请选择收款账号',target:'change'}">
            <el-select v-model="form.underwriterBankAccount" @change="handleChange" placeholder="请选择收款账号"
                       style="width: 100%">
              <el-option v-for="item in options"
                         :key="item.accountNumber" :label="item.accountNumber" :value="item.accountNumber"/>
            </el-select>
          </el-form-item>
          <el-form-item label="开户名称:" prop="underwriterBankName">
            <el-input disabled v-model="form.underwriterBankName"/>
          </el-form-item>
          <el-form-item label="开户银行:" prop="underwriterBank">
            <el-input disabled v-model="form.underwriterBank"/>
          </el-form-item>

        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleSubmit(1)">取 消</el-button>
        <el-button type="primary" @click="handleSubmit(2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {postPaymentVoucher, queryBySupplierId} from "@/api/vehicleDisposal/routineHandle.js"

export default {
  name: 'uploadAccount',//上传违约付款凭证/账户
  computed: {},
  watch: {},
  data() {
    return {
      form: {
        underwriterDefaultId: '',
        underwriterId: '',
        vehicleDisposalId: '',
        vehicleDisposalNo: '',
        recordLogId:'',
        underwriterBankAccount: '',
        underwriterBankName: '',
        underwriterBank: '',
        paymentVoucher: ''
      },
      dialogBoole: false,
      options: []
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {

    handleOpen(row) {
      this.dialogBoole = true
      this.form.underwriterDefaultId = row.underwriterDefaultId
      this.form.underwriterId = row.underwriterId
      this.form.vehicleDisposalId = row.vehicleDisposalId
      this.form.vehicleDisposalNo = row.vehicleDisposalNo
      this.form.recordLogId = row.recordLogId
      this.handleSelectList(row.underwriterId)
    },

    handleSelectList(id) {
      queryBySupplierId({supplierId: id}).then(res => {
        if (res.code === 200) {
          this.options = res.data || []
        }
      })
    },

    handleChange(val) {
      let index = this.options.findIndex(item => item.accountNumber === val)
      if (index !== -1) {
        this.form.underwriterBankName = this.options[index].accountName
        this.form.underwriterBank = this.options[index].bankName
      }
    },

    handleSubmit(val) {
      if (val === 1) {
        if (this.$refs.refForm) {
          this.$refs.refForm.resetFields();
        }
        this.dialogBoole = false

      }

      if (val === 2) {
        this.$refs.refForm.validate((valid) => {
          if (valid) {
            postPaymentVoucher(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.dialogBoole = false
                this.$emit('refresh')
              }
            })
          }
        });
      }
    },


  },
};
</script>




